<template>
  <div>
    <el-form label-position="top">
      <el-form-item label="分类" v-if="isEdit">
        <el-cascader
          v-model="category"
          style="flex: 1"
          :options="categoryList"
          clearable
          :props="{ label: 'name', value: 'categoryId' }"
          @change="changeCategory"
          @clear="changeCategory"
        />
      </el-form-item>
      <el-form-item v-for="item in data" :label="item.stastsName || item.statsTitle" :prop="item.stastsId">
        <div class="checkbox-list">
          <template v-for="(option, index) in item.children">
            <div
              v-if="!option.children?.length"
              :class="isChecked(item, option) ? 'active item' : 'item'"
              @click="checked(item, option)"
            >
              {{ option.stastsName }}
              <img src="@/assets/images/active.png" alt="" />
            </div>
            <div v-else class="select-box">
              {{ option.stastsName }}
              <el-select
                style="width: 130px"
                v-model="selectValue[option.stastsId]"
                :multiple-limit="option.stasType == 3 ? 0 : 1"
                clearable
                @remove-tag="delSelect(item, option, index)"
                @clear="clearSelect(item, option)"
                :disabled="edit"
              >
                <el-option
                  v-for="i in option.children"
                  :value="i.stastsId"
                  :label="i.stastsName"
                  @click="selectChange(item, option, i)"
                >
                </el-option>
              </el-select>
            </div>
          </template>
        </div>
      </el-form-item>
    </el-form>
    <el-empty v-if="!data.length" description="暂无数据" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const emit = defineEmits(["queryFilterList", "update:form", "update:categoryId"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {}
  },
  form: {
    type: Object,
    default: () => {}
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  categoryId: {
    type: String,
    default: () => []
  },
  categoryList: {
    type: Array,
    default: () => []
  }
});
const form = computed({
  set: value => emit("update:form", value),
  get: () => props.form
});
const category = computed({
  set: val => emit("update:categoryId", val),
  get: () => props.categoryId
});
const selectValue = ref({});
const changeCategory = () => {
  emit("queryFilterList");
};
/**
 * 选中
 */
const checked = (item, option) => {
  // 3 多选
  const isExist = form.value[item.stastsId];
  if (isExist) {
    if (item.stasType !== 3) {
      if (isExist == option.stastsId) delete form.value[item.stastsId];
      else form.value[item.stastsId] = option.stastsId;
    } else {
      const exist = form.value[item.stastsId]?.incudes(option.stastsId);
      if (exist) form.value[item.stastsId] = form.value[item.stastsId].filter(v => v != option.stastsId);
      else form.value[item.stastsId].push(option.stastsName);
    }
  } else {
    if (item.stasType !== 3) {
      form.value[item.stastsId] = option.stastsId;
    } else {
      form.value[item.stastsId] = [option.stastsName];
    }
  }
};
/**
 * 是否选中
 */
const isChecked = (item, option) => {
  if (item.stasType == 3) {
    return form.value[item.stastsId]?.incudes(option.stastsId);
  } else {
    return form.value[item.stastsId] == option.stastsId;
  }
};
/**
 * 选择三级框
 */
const selectChange = (item, option, i, isDel) => {
  if (i.stasType != 3) {
    form.value[item.stastsId] = { [option.stastsId]: i.stastsId };
  } else {
    form.value[item.stastsId] = [{ [option.stastsId]: i.stastsId }];
  }
};

/**
 * 获取分类树
 */
const getCategoryTreeData = async () => {
  const res = await getCategoryTreeList("");
  categoryList.value = res.data;
};
</script>

<style lang="scss" scoped>
.checkbox-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  > .item {
    height: 26px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    border: 1px solid transparent;
    line-height: 26px;
    padding: 0 16px;
    cursor: pointer;
    flex: 1;
    white-space: nowrap;
    color: #5c5c5c;

    > img {
      display: none;
    }
  }

  .select-box {
    display: flex;
    white-space: nowrap;
    gap: 10px;
  }

  .active {
    border: 1px solid #409eff;
    position: relative;
    overflow: hidden;

    > img {
      display: block;
      width: 19px;
      height: 18px;
      position: absolute;
      right: -1px;
      bottom: -1px;
    }
  }
}
</style>
